<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>index</title>
		<meta name="author" content="lenovo" />
		<!-- Date: 2013-05-31 -->
		<style>
			*{margin:0px;padding:0px;}
			#main{
				width:100%;
				height:auto;
				margin:0 auto;
				position:relative;
			}
			#main .pin{
				float:left;
				width:225px;
				height:auto;
				padding:15px 0px 0px 15px;
			}
			#main .pin .box{
				width:203px;
				height:auto;
				padding:10px;
				border:1px solid #333;
				background:#FFF;
				box-shadow:0px 0px 5px #333;
			}
			#main .pin .box img{
				width:100%;
			}
		</style>
		<script type="text/javascript" src="drag.js"></script>
		<script src="jquery.js"></script>
		<script src="waterfall.js"> </script>
		<script>
			$(function(){
				$('.pin').waterfall(3);
				
			
			
				//取得最低一列的高度
				//取得最低一列的left
			/*
		
				var aPin =  $('#main .pin');
				var oParent=  $('#main');
				var iBaseW = aPin[0].offsetWidth;
				oParent.css({
					width:iBaseW*5
				})
				var pos = [];
				aPin.each(function(i){
					if(i<5){
						pos[i] = aPin.eq(i).innerHeight();
					}else{
						var minH = Math.min.apply({},pos);
						var minK = getMinKey(pos,minH);
						var minL = aPin.eq(minK)[0].offsetLeft;
						aPin.eq(i).css({
							position:'absolute',
							top:minH,
							left:minL
						})
						pos[minK] +=  aPin.eq(i).innerHeight();
					}
				})
				function getMinKey(arr,min){
					for(var key in arr){
						if(arr[key] == min){
							return key;
						}
					}	
				}
				
				
				//alert(iBaseW)
				
				
				/*
				
				var pos = [];
				for(var i=0;i<5;i++){
					pos[i] = aPin.eq(i).innerHeight();
				}
				var minH = Math.min.apply({},pos);
				var minK = getMinKey(pos,minH);
				var iLeft = aPin.eq(minK)[0].offsetLeft;
				aPin.eq(5).css({
					position:'absolute',
					top:minH,
					left:iLeft
				})
				pos[minK] +=  aPin.eq(5).innerHeight();
				
				var minH = Math.min.apply({},pos);
				var minK = getMinKey(pos,minH);
				var iLeft = aPin.eq(minK)[0].offsetLeft;
				aPin.eq(6).css({
					position:'absolute',
					top:minH,
					left:iLeft
				})
		
				
				
				
				function getMinKey(arr,min){
					for(var key in arr){
						if(arr[key] == min){
							return key;
						}
					}	
				}
				
				
				$('#main .pin').each(function(i){
					if(i>=5){
						this.style.position = 'absolute';
						drag(this);
					}
				})
				*/
			})
			
		</script>
	</head>
	<body>
		<div id="main">
			<div class='pin'>
				<div class='box'>
					<img src="./images/1.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/2.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/3.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/4.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/5.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/7.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/8.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/1.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/2.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/3.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/4.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/5.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/7.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/8.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/1.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/2.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/3.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/4.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/5.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/7.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/8.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/1.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/2.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/3.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/4.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/5.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/7.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/8.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/1.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/2.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/3.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/4.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/5.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/7.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/8.jpg">
				</div>
			</div><br /><div class='pin'>
				<div class='box'>
					<img src="./images/1.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/2.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/3.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/4.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/5.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/7.jpg">
				</div>
			</div>
			<div class='pin'>
				<div class='box'>
					<img src="./images/8.jpg">
				</div>
			</div>
		</div>



	</body>
</html>

